<template>
  <view class="pdf-preview">
      <view v-if="showCollects" class="show_collect_like">
          <image class="like" @click="likeFn(info)"
                 :src="info.like === 1 ? '../static/images/home/heart_fill.png' : '../static/images/home/heart.png'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.likeNumber" class="likeNumber">{{ info.likeNumber }}</text>
          <image class="collection" @click="collectionFn(info)"
                 :src="info.collect === 1 ? '../static/images/start1.svg' : '../static/images/start.svg'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.collectNumber" class="collectNumber">{{ info.collectNumber }}</text>
      </view>
      <zmm-watermark :watermark="watermark" :margin="40"></zmm-watermark>
      <image v-if="search" src="../static/images/home/open.svg" class="icon" @click="rightPopup"></image>
      <!--      关键字列表-->
      <u-popup :show="showRight" mode="right" @close="closeFn" @open="openFn" class="keywords">
          <view class="keyword">
              <view class="image">
                  <image src="../static/images/home/close.svg" @click="closeFn"></image>
              </view>
              <view class="content">
                  <view class="model model-title">
                      <image src="../static/images/home/model-title.svg"></image>
                      关键字列表
                  </view>
                  <view class="scroll_view">
                      <view :class="knowledgeIndex == index ? 'active' : ''" class="model" @click="knowledgeFn(item, index)" v-for="(item, index) in items" :key="index"> <image src="../static/images/home/model.svg"></image>{{ item.text }} </view>
                  </view>
              </view>
          </view>
      </u-popup>

       <!-- 检索结果后处理的问题 -->
       <view v-show="highlightedContent != ''" v-html="highlightedContent"></view>
    <view  v-show="highlightedContent == ''" class="mainContent">
    <view class="theme_title" v-if="dataInfo.content">{{ dataInfo.content[0].meta_info.process_name }}</view>

    <view v-for="(item, index) in dataInfo.content" class="model">
      <!-- <view v-for="(H,I) in item.material_spec"> -->
      <view class="sec_title" v-if="dataInfo.content">
        <!-- <text>{{ item.meta_info.gongbu_number }}</text> -->
        <text>{{ item.meta_info.gongbu_name }}</text>
      </view>
      <!-- 材料名称规格 -->
      <view class="h1">
        <text style="margin-right: 10rpx;">{{ index + 1 }}.1</text>
        <text>{{ item.material_spec.tbl_name }}</text>
      </view>
      <table>
        <tr>
          <th v-for="(th, thi) in item.material_spec.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.material_spec.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>
      <!-- 操作流程和质量要求 -->
      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.2</text>
        <text>{{ item.operation_flow.tbl_name }}</text>
      </view>
      <table class="technology">
        <tr>
          <th v-for="(th, thi) in item.operation_flow.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.operation_flow.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>
      <!-- 质量要求 -->
      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.2</text>
        <text>{{ item.quality_req.tbl_name }}</text>
      </view>
      <table>
        <tr>
          <th v-for="(th, thi) in item.quality_req.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.quality_req.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>
      <!-- 注意事项 -->
      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.3</text>
        <text>{{ item.caution_req.tbl_name }}</text>
      </view>
      <table>
        <tr>
          <th v-for="(th, thi) in item.caution_req.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.caution_req.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>
      <!-- 设备工装 -->
      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.4</text>
        <text>{{ item.equipment.tbl_name }}</text>
      </view>
      <table class="equipment">
        <tr>
          <th v-for="(th, thi) in item.equipment.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.equipment.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>
      <!-- 操作表 -->
      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.5</text>
        <text>{{ item.operation_flow.tbl_name }}</text>
      </view>
      <table>
        <tr>
          <th v-for="(th, thi) in item.operation_flow.headers" :key="thi">{{ th }}</th>
        </tr>
        <tr v-for="(td, tdi) in item.operation_flow.row_paragraphs" :key="tdi">
          <td v-for="(dd, ddi) in td.texts" :key="ddi">
            {{ dd }}
          </td>
        </tr>
      </table>

      <view class="h1">
        <text style="margin-right: 10rpx">{{ index + 1 }}.6</text>
        <text>操作参考</text>
      </view>
      <!-- <image v-for="(image, IMGi) in item.related_images" :key="index" :src="image"></image> -->
      <image class="text_image" mode="widthFix" @click="previewImage($config.baseUrl + item.operation_example)" :src="$config.baseUrl + item.operation_example"></image>
    </view>
  </view>    
  </view>
</template>

<script>
export default {
  name: "preview",
  data() {
    return {
        knowledgeIndex: -1,
        info: {},
        isSearch: false,
        showCollects: true,
        QA: false,
        html: null,
        items: [],
        search: false,
        keywords: [],
        dataInfo: {},
        albumWidth: 0,
        urls1: [
            {
                src2: 'https://cdn.uviewui.com/uview/album/1.jpg'
        },
      ],
        showRight:false,
        highlightedContent:'',
        watermark: this.$store.state.user.id + this.$store.state.user.name
    };
  },
  onLoad(options) {
     
      this.info = JSON.parse(options.info)
	  if(this.info){
	  	this.info.like = 0
	  	this.info.likeNumber = 0
	  	this.info.collectNumber = 0
	  	this.info.collect = 0
	  }
      console.log(options,this.info, '查看进入的参数')
      this.isSearch = options.isSearch
    
      this.showCollects = !options.showCollects
      this.search = options.search == 'true' ? true : false
      if (this.search == true) {
          this.items = this.info.ext.items
          // this.keywords = this.info.ext.items[0].text.split(',')
          // if(this.info.ext.items[0].trace_location.table_index != -1) {
          //   this.keywords = this.info.ext.items[0].trace_location.table_index + this.info.ext.items[0].trace_location.pdf_search_str.split(',')
          //   console.log("fffgggg",this.keywords)
          // }
         
          this.knowledgeIndex = 0
       
      }
      console.log(options.search, this.info, 'ffffff')
    this.QA = options.QA;

    this.getPreview();
  },
  computed: {
    // 过滤正文关键字数据
    filterFn() {
      return (params) => {
        const regex1 = /^图\s/i;
        const regex2 = /^表\s/i;

        if (regex1.test(params) || regex2.test(params)) {
          return;
        } else {
          return params;
        }
      };
      // if((/[\u4e00-\u9fa5]图\s/).test(item)){
      // 	return
      // }else{
      // 	return item
      // }
    },
    workflowHeight() {
      let height = document.documentElement.clientHeight || document.body.clientWidth;
      height = (height - 46) * 2;
      return {
        height: height + "rpx",
      };
    },
  },
  methods: {
    scrollToElement() {
      this.$nextTick(() => {
        const element = document.querySelector(".highlight");
        if (element) {
          element.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      });
    },
    openFn() {
    },
    previewImage(url) {
      uni.previewImage({
        current: 0, // 当前显示图片的索引
        urls: [url], // 需要预览的图片列表
      });
    },
    knowledgeFn(item, index) {
      this.knowledgeIndex = index;
      // this.keywords = item.text.split(",");
      this.keywords = item.trace_location.pdf_search_str.split(",");
      // if(this.info.ext.items[0].trace_location.table_index != -1) {
      //       this.keywords = this.info.ext.items[0].trace_location.table_index+1 +'.'+ this.info.ext.items[0].trace_location.pdf_search_str.split(',')
      //       console.log("fffgggg",this.keywords)
      //     }
      this.keywordsFn();
      console.log("knowledge", this.keywords, index);
    },
    keywordsFn() {
      const pageContent = document.querySelector(".mainContent").innerHTML;
      // console.log("查看对应文本", pageContent.indexOf('顺序1'))
      this.keywordIndex = pageContent.indexOf(this.keywords);

      const regex = new RegExp(this.keywords, "g");
      this.highlightedContent = pageContent.replace(regex, (match) => {
        return `<uni-text class="highlight" style="color:#008fff">${match}</uni-text>`;
      });
      setTimeout(() => {
        document.querySelector(".text_image").onclick = (e) => {
          this.previewImage(e.target.src);
        };
      }, 1000);
      console.log(this.highlightedContent, "fffff");
      if (this.keywordIndex !== -1) {
        this.scrollToKeyword();
      }
    },
    scrollToKeyword() {
      this.$nextTick(() => {
        const element = document.querySelector(".highlight");

        console.log("666666", element);
        
        if (element) {
          element.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
      });
    },
    collectionFn(item) {
      let url = item.collect === 1 ? "/knowledgeCollect/delete" : "/knowledgeCollect/add";
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "2",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.collect === 1) {
          this.$toast("取消收藏");
          this.info.collect = 0
            this.info.collectNumber--
        } else {
            this.$toast('已收藏')
            this.info.collect = 1
            this.info.collectNumber++
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    likeFn(item) {
        let url = item.like === 1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
      this.$request({
        url: url,
        method: "post",
        data: {
          collectType: "1",
          knowledgeFileId: item.id,
        },
      }).then(({ data }) => {
        if (item.like === 1) {
          this.$toast("取消点赞");
            this.info.like = 0
            this.info.likeNumber--
        } else {
          this.$toast("已点赞");
            this.info.like = 1
            this.info.likeNumber++
        }
        console.log("info===", this.info);
        this.$forceUpdate();
      });
    },
    getPreview() {
      // this.$modal.loading("正在加载中···");
      let that = this;
      this.$request({
        url: "/knowledgeData/getJson", //    this.QA ? '/file/getUrl' : '/knowledgeData/preview'
        method: "get",
        params: {
          id: this.info.id,
        },
      }).then(({ data }) => {
        if(!data.readAuthority){
          this.$toast("当前文件未发布，不可预览")
          return
        }
        // setTimeout(() => {
        //       this.knowledgeFn(this.info.ext.items[0], 0)
        //   }, data.fileSize < 2 ? 2000  : data.fileSize * 3000  )
        console.log("查看数据", JSON.parse(data.videoJson));
        this.dataInfo = JSON.parse(data.videoJson);
        this.$request({
          url: "/knowledgeData/addView",
          method: "post",
          data: {
            id: this.info.id,
          },
        }).then(() => {
			this.info.like = data.like
			this.info.likeNumber = data.likeNumber
			this.info.collectNumber = data.collectNumber
			this.info.collect = data.collect
		});
      });
    },
      rightPopup() {
          console.log("ffff");
          this.showRight = true;
      },
      closeFn() {
          this.showRight = false;
      },
  },
};
</script>

<style lang="scss">
.pdf-preview {
  counter-reset: section;
}

// .model .sec_title::before {
//   counter-increment: section;
//   content: counter(section) ".";
//   margin-right: 10rpx;
// }

.technology {
  tr {
    & th:nth-child(1) {
      width: 10%;
    }
    & th:nth-child(2) {
      width: 40% !important;
    }
    & th:nth-child(3) {
      width: 40% !important;
    }
  }
}
.equipment {
  th,
  td {
    width: auto !important;
  }
}
.theme_title {
  font-size: 36rpx;
  color: #1c2126;
  text-align: center;
  font-weight: 550;
}

.sec_title {
  font-size: 32rpx;
  color: #1c2126;
  padding: 10rpx 0 20rpx;
  font-weight: 550;
  & uni-text:nth-child(1) {
    margin-right: 10rpx;
  }
}

.image {
  width: 100%;
  margin: 20rpx 0 0;
}

.legend {
  color: #4c5a67;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
}

.pdf-preview {
  padding: 20rpx;
  background: #fff;
  width: 100%;
  height: 100vh;
  position: relative;
  background: white;
  padding-bottom: 140rpx;
  // 设置所有正文的行号
  .content {
    line-height: 48rpx;
    color: #1c2126;
    font-size: 30rpx;
  }

  // .h0 {
  //   .title {
  //     font-size: 36rpx;
  //     font-weight: 550;
  //     color: #1c2126;
  //     text-align: center;
  //   }
  // }

  // .h1 {
  //   font-weight: 550;
  //   & uni-text:nth-child(1) {
  //     margin-right: 10rpx;
  //   }
  // }

  // .h2 {
  //   .title {
  //     font-size: 30rpx;
  //     font-weight: 550;
  //     color: #1c2126;
  //     padding: 40rpx 0 20rpx;
  //   }
  // }

  // .h3 {
  //   .title {
  //     font-size: 30rpx;
  //     font-weight: 550;
  //     color: #1c2126;
  //     padding: 40rpx 0 20rpx;
  //   }
  // }
}

::v-deep img {
  width: 94.5vw;
  // height: 940rpx;
  // margin-left: 25vw;
  padding: 20rpx 0;
}

::v-deep table {
  border-collapse: collapse;
  /* 合并单元格边框 */
  // border: 1px solid #ddd; /* 设置表格边框 */
  width: 96vw;
  // display: flex;
  overflow-x: scroll;
  margin: 20rpx 0 40rpx;
  border-color: none;

  width: 100%;
  table-layout: fixed;

  & th:first-child,
  & td:first-child {
    width: 10%;
    text-align: center;
  }

  & th:not(:first-child),
  & td:not(:first-child) {
    width: auto;
  }
}

::v-deep tr {
  width: auto;
  // border: 1px solid #ddd;

  /* 设置单元格边框 */
  padding: 8rpx;
  /* 设置单元格内边距 */
  &:nth-child(odd) {
    background: #f9fbfc !important;
  }
}

::v-deep td {
  // width: auto;
  // border: 1px solid #ddd;
  /* 设置单元格边框 */
  padding: 20rpx 10rpx;
  /* 设置单元格内边距 */
  color: #1c2126;
  font-size: 26rpx;
  border: none !important;
}

::v-deep th {
  background: #eaecef;
  color: #1c2126;
  font-size: 28rpx;
  border: none;
  padding: 10rpx;
  border: none !important;
}

::v-deep table tr:nth-child(1) {
  font-size: 28rpx;
  font-size: 500;

  background: #eaecef;
  color: #1c2126;
  // th:nth-child(1){
  // 	background: red;
  // 	width: 60rpx;
  // 	display: inline-block;
  // }
}
::v-deep table tr {
  & td:nth-child(1) {
    text-align: center;
    min-width: 60rpx;
    width: 60rpx;
  }
}

::v-deep td p {
  white-space: nowrap;
  font-size: 28rpx;
}

.icon {
  position: fixed;
  right: 0;
  top: calc(50% - 83rpx);
  z-index: 999;
  width: 56rpx;
  height: 166rpx;
}
.keywords{
    ::v-deep .u-popup__content {
        background: transparent;
    }
    
    .model {
        width: 434rpx;
        min-height: 80rpx;
        line-height: 80rpx;
        display: flex;
        justify-items: flex-start;
        align-items: center;
        padding: 0 24rpx;
        font-family: 思源黑体;
        font-size: 30rpx;
        word-break: break-all;
        text-align: justify;
        //margin: 24rpx;
        image {
            width: 32rpx;
            height: 32rpx;
            margin-right: 20rpx;
            min-width: 32rpx;
        }
        &.model-title {
            position: relative;
            color: #0084ff;
            //border-bottom: 1rpx solid #D8D8D8;
            &:before {
                content: "";
                width: calc(100% - 48rpx);
                height: 1rpx;
                position: absolute;
                left: 24rpx;
                right: 24rpx;
                bottom: 0;
                background: #d8d8d8;
            }
            &:hover {
                background: #ffffff;
            }
        }
        
        &.active {
            background: #e8f8ff;
        }
        &:hover {
            background: #e8f8ff;
        }
    }
    
    .scroll_view{
        height: calc(100vh - 80rpx);
        overflow-y: auto;
    }
    
    .keyword {
        display: grid;
        grid-template-columns: 56rpx 1fr;
        width: 100%;
        height: 100%;
        view.image {
            width: 56rpx;
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        view.content {
            background: #ffffff;
        }
        .image {
            width: 100%;
            margin: 20rpx 0 0;
        }
    }
}
</style>
